﻿@{
    <!--页面标题-->
    ViewBag.Title = "臻盈LeGo-商城首页";
}

<!--body部分-->
<body>
    <!-- header头部模块制作 start -->
    <header class="header w">
        <!-- logo模块 -->
        <div class="logo">
            <img src="~/Content/Images/logo.jpg" width="150px" height="60px" />
        </div>
        <!-- 列表页的秒杀模块 -->
        <div class="sk">
            <img src="~/Content/Images/sk.png" />
        </div>
        <!-- search搜索模块 -->
        <div class="search">
            <input type="search" name="" id="" placeholder="臻盈LeGo">
            <button>搜索</button>
        </div>
        <!-- hotwords模块制作 -->
        <div class="hotwords">
            <a href="#" class="style_red">LeGo首发</a>
            <a href="#">百亿优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>
        <!-- 购物车模块 -->
        <div class="shopcar">
            我的购物车
            <i class="count">8</i>
        </div>
    </header>
    <!-- header头部模块制作 end -->
    <!-- nav模块制作 start -->
    <nav class="nav">
        <div class="w">
            <div class="sk_list">
                <ul>
                    <li>
                        <a href="#" style="background-color:crimson;color:white;">
                            <i><img width="25px" height="25px" src="~/Content/Images/全部.png" /></i>
                            全部商品分类
                        </a>
                        <div class="fenlei">
                            <ul>
                                <li><a href="#">母婴</a><a href="#">玩具</a><a href="#">童装童鞋</a></li>
                                <li><a href="#">手机</a><a href="#">数码</a><a href="#">配件</a></li>
                                <li><a href="#">电脑</a><a href="#">办公配件</a></li>
                                <li><a href="#">电视</a><a href="#">冰箱</a><a href="#">洗衣机</a></li>
                                <li><a href="#">运动户外</a><a href="#">汽车用品</a></li>
                                <li><a href="#">厨卫电器</a><a href="#">小家电</a><a href="#">个人护理</a></li>
                                <li><a href="#">美妆个护</a><a href="#">面膜</a><a href="#">洗护</a></li>
                                <li><a href="#">男装</a><a href="#">女装</a><a href="#">内衣</a></li>
                                <li><a href="#">箱包皮具</a><a href="#">钟表饰品</a></li>
                                <li><a href="#">食品粮油</a><a href="#">酒水冲调</a><a href="#">咖啡</a></li>
                                <li><a href="#">居家家纺</a><a href="#">家庭建材</a><a href="#">盆栽</a></li>
                                <li><a href="#">图书</a><a href="#">免费书城</a><a href="#">童书</a></li>
                                <li><a href="#">金融</a><a href="#">理财</a><a href="#">众筹</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">LeGo秒杀</a></li>
                    <li><a href="#">电器城</a></li>
                    <li><a href="#">生活家电</a></li>
                    <li><a href="#">时尚服装</a></li>
                    <li><a href="#">特价优惠</a></li>
                    <li><a href="#">LeGo专区</a></li>
                    <li><a href="#">会员</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- nav模块制作 end -->
    <!-- 列表页主体部分 -->
    <!-- 列表页主体部分制作 start-->
    <div class="w sk_container">
        <!--轮播图制作 start-->
        <div class="sk_hd">
            <a href="#"><img class="img-slide img" src="~/Content/Images/fq.jpg" /></a>
            <a href="#"><img class="img-slide img" src="~/Content/Images/kjp.jpg" /></a>
            <a href="#"><img class="img-slide img" src="~/Content/Images/zb_xx.gif" /></a>
        </div>
        <!--轮播图制作 start-->
        <!--轮播图效果设置-->
        <script type="text/javascript">
            // index：索引， len：长度
            var index = 0, len;
            // 类似获取一个元素数组
            var imgBox = document.getElementsByClassName("img-slide");
            len = imgBox.length;
            imgBox[index].style.display = 'block';
            // 逻辑控制函数
            function slideShow() {
                index++;
                // 防止数组溢出
                if (index >= len) index = 0;
                // 遍历每一个元素
                for (var i = 0; i < len; i++) {
                    imgBox[i].style.display = 'none';
                }
                // 每次只有一张图片显示
                imgBox[index].style.display = 'block';
            }
            // 定时器，间隔3s切换图片
            setInterval(slideShow, 8000);
        </script>
        <!--轮播图效果设置 end-->
        <div class="sk_xg">
            <div class="sk_head">
                <img src="~/Content/Images/xs_qg.png" /><b>让生活精彩不停</b>
                <ul>
                    <li><a href="#"><</a></li>
                    <li><a href="#">></a></li>
                </ul>
            </div>
            <div>
                <div carousel-item="">
                    <!--商品-->
                </div>
            </div>
        </div>
        <div class="sk_bd">
            <ul class="clearfix">
                <li>
                    <img src="~/Content/Images/list.jpg" alt="">
                </li>
                <li>
                    <img src="~/Content/Images/list.jpg" alt="">
                </li>
                <li>
                    <img src="~/Content/Images/list.jpg" alt="">
                </li>
                <li>
                    <img src="~/Content/Images/list.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
    <!-- 列表页主体部分制作 end-->
    
</body>
